<template>
  <el-dialog v-model="isSetting" title="设 置" :width="settingDialogWidth">
    <div class="setting-content">
      <div class="scale-content">
        <div class="scale-header">
          <div style="flex: 1">
            使用方式：1.选择分组-->2.选择阶段-->3.选择CRF-->4.设置是否发送通知
          </div>
          <div>
            <el-button type="primary" plain @click="handleTopMenu(0)">医生填</el-button>
            <el-button type="success" plain @click="handleTopMenu(1)">患者填</el-button>
            <el-button type="warning" plain @click="handleTopMenu(2)">都可填</el-button>
            <el-button type="danger" plain @click="handleTopMenu(3)">全医生填</el-button>
            <el-button type="primary" plain @click="handleTopMenu(4)">全患者填</el-button>
            <el-button type="success" plain @click="handleTopMenu(5)">全都可填</el-button>
          </div>
        </div>
        <div class="scale-main">
          <div class="group-content">
            <span class="c-title">1.分组选择</span>
            <div class="group-list">
              <div
                class="group-list-line"
                v-for="(item, index) in groupList"
                :key="item.id"
                @click="handleGroupName(item)"
                :style="{
                  backgroundColor: groupLineValue.id === item.id ? '#428bca' : '',
                  color: groupLineValue.id === item.id ? '#fff' : '',
                  borderBottom: index === 0 ? 'none' : '1px solid #dddddd',
                }"
              >
                <Memo style="width: 16px; height: 16px; margin-right: 2px; margin-left: 20px" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="enter-group-content">
            <span class="c-title">2.阶段选择</span>
            <div class="enter-group-list">
              <div
                class="enter-group-list-line"
                v-for="(item, index) in enterGroupList"
                :key="item.id"
                @click="handleEnterGroupName(item)"
                :style="{
                  backgroundColor: enterGroupLineValue.id === item.id ? '#428bca' : '',
                  color: enterGroupLineValue.id === item.id ? '#fff' : '',
                  borderBottom: index === 0 ? 'none' : '1px solid #dddddd',
                }"
              >
                <Memo style="width: 16px; height: 16px; margin-right: 2px; margin-left: 20px" />
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
          <div class="crf-content">
            <span class="c-title">3.CRF选择</span>
            <avue-crud
              :data="crfData"
              :option="crfOption"
              :table-loading="tableLoading"
              v-model:page="page"
              ref="crud"
              @selection-change="selectionChange"
              @current-change="currentChange"
              @size-change="sizeChange"
            >
              <template #PJFS="{}">
                <span style="color: #72afd2;">都可填</span>
              </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isSetting = false">取 消</el-button>
        <el-button type="primary" @click="handleSettingSubmit"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { groupListOfTrial } from '@/api/trial/trial';
import { treeWithCrf, addToProcessLibrary, processLibraryTreeWithCrf } from '@/api/group/group';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const routerQuery = ref({});
routerQuery.value = route.query;
let isSetting = ref(false);
let tabsType = ref(1);
let settingRadio = ref('2');
let settingDialogWidth = ref(1200);
let groupList = ref([]);
let crud = ref(null);
let selectionList = ref([]);
let enterGroupList = ref([]);
let crfOption = ref({
  index: false,
  height: 'auto',
  calcHeight: 330,
  // maxHeight: 300,
  selection: true,
  addBtn: false,
  editBtn: false,
  viewBtn: false,
  delBtn: false,
  menu: false,
  align: 'center',
  searchShowBtn: false,
  refreshBtn: false,
  gridBtn: false,
  columnBtn: false,
  column: [
    {
      label: '模版名称',
      prop: 'crfName',
      type: 'input',
      overHidden: true,
    },
    {
      label: '评价方式',
      prop: 'PJFS',
      type: 'input',
      overHidden: true,
      slot: true,
      width:100,
    },
  ],
});
let tableLoading = ref(false);
let crfData = ref([]);
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 4,
});
let groupLineValue = ref({});
let enterGroupLineValue = ref({});
let cutSend = ref(true);
let cutInform = ref(true);

// 头部按钮点击
/* 
  type 0:医生填
  type 1:患者填
  type 2:都可填
  type 3:全医生填
  type 4:全患者填
  type 5:全都可填
*/
const handleTopMenu = type => {
  // ids.value被勾选的ids
};
// 分组选择---每一项点击事件
const handleGroupName = item => {
  groupLineValue.value = item;
  initTreeWithCrf(item.id);
};
// 阶段选择---每一项点击事件
const handleEnterGroupName = item => {
  enterGroupLineValue.value = item;
  crfData.value = item.crfList;
};
const handleSettingSubmit = () => {};
// ids 计算属性
const ids = computed(() => {
  return selectionList.value.map(ele => ele.id).join(',');
});
const selectionChange = list => {
  selectionList.value = list;
};
const selectionClear = () => {
  selectionList.value = [];
  crud.value.toggleSelection();
};
const currentChange = currentPage => {
  page.value.currentPage = currentPage;
  // TabRefreshChange();
};
const sizeChange = pageSize => {
  page.value.pageSize = pageSize;
  // TabRefreshChange();
};
const onLoad = (page, params = {}) => {
  loading.value = true;

  const { name, lbType } = query.value;

  let values = {
    name_: name,
    lbType_: lbType,
    descs: 'create_time',
    shareType: params.shareType || 1,
    ...params,
  };

  getList(page.currentPage, page.pageSize, values).then(res => {
    const DATA = res.data.data;
    page.total = DATA.total;
    data.value = DATA.records;
    data.value.forEach(item => {
      item.isShareSelect = 3;
      if (item.publicShare == '1') {
        item.isShareBtn = '0';
        item.isShareSelect = 1;
      } else if (item.deptShare == '1') {
        item.isShareBtn = '6';
        item.isShareSelect = 2;
      }
    });
    loading.value = false;
    selectionClear();
  });
};
// 打开弹窗
const openSetting = () => {
  isSetting.value = true;
  tabsType.value = 1;
  settingRadio.value = '2';
  settingDialogWidth.value = 1200;
  for (const key in groupLineValue.value) {
    groupLineValue.value[key] = '';
  }
  for (const key in enterGroupLineValue.value) {
    enterGroupLineValue.value[key] = '';
  }
  initData();
};
const initData = () => {
  // 各分组
  groupListOfTrial(routerQuery.value.trialId).then(res => {
    groupList.value = res.data.data;
    groupLineValue.value = groupList.value[0];
    // CRF阶段接口方法---默认显示第一个分组的CRF阶段
    initTreeWithCrf(groupList.value[0].id);
  });
};
const initTreeWithCrf = groupId => {
  treeWithCrf(groupId).then(res => {
    enterGroupList.value = res.data.data;
    enterGroupLineValue.value = enterGroupList.value[0];
    // 默认赋值第一个CRF阶段的CRF
    crfData.value = res.data.data[0].crfList;
  });
};
onMounted(() => {});
defineExpose({
  openSetting,
});
</script>
<style scoped lang="scss">
.basic-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.basic-title {
  width: 75%;
  height: auto;
  color: black;
  margin-bottom: 20px;
  /* font-weight: 550; */
}
.alert-radio {
  width: 75%;
  height: auto;
  color: black;
  /* font-weight: 550; */
}
.scale-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.scale-header {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  color: #0000ff;
  display: flex;
  align-items: center;
}
.scale-main {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}
.group-content,
.enter-group-content {
  width: 29%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.c-title {
  font-size: 14px;
  color: black;
  font-weight: 550;
  margin-bottom: 5px;
}
.group-list {
  width: 100%;
  height: 420px;
  color: #428bca;
  overflow-y: auto;
  overflow-x: hidden;
}
.group-list-line {
  width: 99%;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #dddddd;
  cursor: pointer;
}
.enter-group-list {
  width: 100%;
  height: 420px;
  color: #00bb00;
  overflow-y: auto;
  overflow-x: hidden;
}
.enter-group-list-line {
  width: 99%;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #dddddd;
  cursor: pointer;
}
.crf-content {
  width: 40%;
  height: auto;
  ::v-deep .avue-crud__header {
    display: none;
  }
}
</style>